<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" th:href="@{/resources/imgs/icon.svg}"/>
  <meta name="description" content="Java websocket middleware service">
  <meta name="author" content="xchb">
  <script th:src="@{/resources/js/jquery.js}"></script>
  <script th:src="@{/resources/js/bootstrap.min.js}"></script>
  <link th:href="@{/resources/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/resources/css/main.css}" rel="stylesheet">
  <title>服务信息</title>

  <style>
    .redColor {
      background-color: red;
      cursor: pointer;
    }

    .greenColor {
      background-color: greenyellow;
      cursor: pointer;
    }

    td {
      cursor: pointer;
    }
  </style>

</head>
<body>


<div class="wrapper-page" style="margin-top: 3%;text-align: center;">

  <h3>
		<span>
			服务总数量 <span
        th:class="'label label-default '+${datas.serverCount>0?'greenColor':'redColor'}"
        th:text="${datas.serverCount}"></span>
		</span>
  </h3><br/><br/>
  <div style="width: 90%;display: inline-block;">
    <table class="table table-striped table-hover">
      <thead>
      <tr class="danger">
        <td>
          序号
        </td>
        <td class="active">
          协议
        </td>
        <td>
          节点ip
        </td>
        <td>
          连接数量
        </td>
      </tr>
      </thead>
      <tbody>
      <tr th:if="${datas.items==null || datas.items.size()<1}">
        <td colspan="9" style="color: red;">
          暂无任何服务
        </td>
      </tr>
      <tr th:if="${datas.items!=null || datas.items.size()>0}" th:each="item,state:${datas.items}">
        <td th:text="${state.index+1}"></td>
        <td th:text="${item.protocol}"></td>
        <td th:text="${item.netAddress}"></td>
        <td th:text="${item.connectorCount}"></td>
      </tr>
      </tbody>
    </table>
  </div>


</div>

</body>

<script>


</script>
</html>